/**
 * style.css contains a reset, font normalization, and some base styles
 */

/**
 * Accent Colors
 * - orange (dark)  - #e44d26
 * - orange (mid)   - #f14a29
 * - orange (light) - #f16529
 * - blue (dark)    - #057
 * - blue (mid)     - #0092bf
 * - blue (light)   - #a6d9e9
 */

@import url(reset.css);

/* handle feature availability */
html.no-canvas       .canvas,        html.canvas        .no-canvas,
html.no-emailinput   .emailinput,    html.emailinput    .no-emailinput,
html.no-h264         .h264-maybe,    html.h264-maybe    .no-h264,         html.h264-maybe    .h264-probably,
html.no-h264         .h264-probably, html.h264-probably .no-h264,         html.h264-probably .h264-maybe,         
html.no-js           .js,            html.js            .no-js,
html.no-localstorage .localstorage,  html.localstorage  .no-localstorage,
html.no-svg          .svg,           html.svg           .no-svg,
html.no-video        .video,         html.video         .no-video
{ display:none; }


/***| sections |***************************************************************/

/* [minimal base style] headers (h1, h2, etc) have no default font-size or margin; define those yourself */
h1, h2, h3, h4, h5, h6 { font-weight: bold; }


/***| grouping |***************************************************************/

blockquote { quotes: none; }
blockquote:before, blockquote:after { content: ""; content: none; }

hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }


/***| text + edits |***********************************************************/

/* [minimal base style] j.mp/webkit-tap-highlight-color */
/* CHANGE: Make tap highlight color orange */
a:link { -webkit-tap-highlight-color: #f14a29; }

/* [minimal base style] */

/* CHANGE: default <pre>/<code> to be a block element when outside of a <li>/<p> */
code, pre { display:block; }
.syntaxhighlighter code { display:inline; }
li code, li pre, p code, p pre { display:inline; }

del                  { text-decoration:line-through; }
ins, mark            { background-color:transparent; font-style:normal; font-weight:bold; text-decoration:none; }
del  code, code del  { color:#b0b0b0; }
ins  code, code ins  { color:#090; }
mark code, code mark { color:#009; }



/**********************************************************************************************************************/
/***| document mode (default) |****************************************************************************************/
/**********************************************************************************************************************/

/**
 * These styles have not been moved up to the main reset areas because they are currently focused on the document mode 
 * only. As the two merge, they should be promoted.
 */

/* TODO: Add .no-js to each of these when ready to switch to styling the interactive demo */

/* set block-level margins */
body, p   { margin:15px; }
blockquote, code { margin:auto 30px; }
dl, dt    { margin:auto 15px; }
ol        { margin:auto 55px; }  /* ol right-aligns numbers, throwing off spacing for 2-digit numbers, so it needs an extra few px over ul */
ul        { margin:auto 40px; }

/* reset when inline */
li code, p code, dd p code { margin:auto 0; }

/* affix quotes */
blockquote                { color:#057; font-size:1.25em; margin-top:2.25em; font-style:italic; }  /* move down to compensate for the quote offset */
blockquote p              { margin-top:-2.25em; }                                                  /* move up to compensate for the blockquote top margin */
blockquote:before, blockquote:after { color:#a6d9e9; font-family:Georgia; font-size:3em; font-weight:bold; xposition:relative; }
blockquote:before         { content:'“'; margin-left:-1em; }
blockquote:after          { content:'”'; display:block; margin:-1em auto 1em; text-align:right; }

/* put author on right with "-" prefix */
blockquote .author        { color:#444; padding-right:30px; text-align:right; }
blockquote .author:before { content:'–'; padding-right:.5em; }

/* headers */
#container > header h1, article > header        h1, article > footer h1, article > section > header h1, article > section > footer h1, article > section > section > header h1, 
#container > header h2, article > header hgroup h2, article > footer h2, article > section > header h2, article > section > footer h2, 



article > section > div > section > header h1, 
dt                                                               { font-family:Segoe UI,Arial Black,sans-serif; line-height:86%; padding:7px 15px 13px; text-transform:uppercase; }
/* headers w/ bg  */ #container > header h1, article > header h1 { color:#fff; }
/* doc header     */ #container > header h1                      { background-color:#f14a29; font-size:3.5em; margin:0 0 1em; }
                     #container > header h1::selection           { background-color:#e44d26; color:#f16529; }
/* l1 header      */ article > header h1                         { background-color:#0092bf; font-size:2.75em; margin:1.5em 0 .5em; }
                     article > header h1::selection              { background-color:#057; color:#a6d9e9; }
/* l1 subheader   */ article > header hgroup h2                  { color:#0092bf; font-size:1.75em; margin:0 0 .5em; }
/* l2 header      */ article > section > header h1, article > section > footer h1, article > footer h1 
                                                                 { color:#f14a29; font-size:2.25em; margin:1em 0 .5em; }
/* l2 sub/l3 head */ article > section > header h2,           article > section > footer h2, article > footer h2,
                     article > section > section > header h1, article > section > section > footer h1, article > footer h2, 
article > section > div > section > header h1, article > section div > > section > footer h1,
                     dt                                          { color:#e44d26; font-size:1.5em; font-weight:normal; margin:1em 0 .5em; }
/* pad to align   */ dt                                          { padding:2px 15px 8px; }



/**********************************************************************************************************************/
/***| content |********************************************************************************************************/
/**********************************************************************************************************************/

/***| title page |*************************************************************/

/* tech classes */
#container > header > nav li             { display:inline; }
#container > header > nav a              { display:inline-block; overflow:hidden; text-align:center; width:96px; }
#container > header > nav a img          { display:block; position:relative; }
#container > header > nav .semantics img { right:0; }
#container > header > nav .offstore  img { right:96px; }
#container > header > nav .device    img { right:192px; }
#container > header > nav .media     img { right:288px; }
#container > header > nav .graphics  img { right:384px; }
#container > header > nav .perfint   img { right:480px; }
#container > header > nav .connect   img { right:576px; }
#container > header > nav .styling   img { right:672px; }

/* TODO: Is there a better way to position these links top-aligned? */
#container > header > nav ul         { height:140px; position:relative; }
#container > header > nav a          { position:absolute; top:0; }
#container > header > nav .offstore  { left:96px; }
#container > header > nav .device    { left:192px; }
#container > header > nav .media     { left:288px; }
#container > header > nav .graphics  { left:384px; }
#container > header > nav .perfint   { left:480px; }
#container > header > nav .connect   { left:576px; }
#container > header > nav .styling   { left:672px; }


/***| html5 is... |************************************************************/

#html5-history ol { list-style-type:none; margin-left:30px; }
#html5-history ol li { line-height:2em; }
#html5-history ol li b { padding-right:.75em; }
#html5-history ol li b:after { content:':'; }

#html5-pubs li progress, #html5-pubs li span { display:none; }  /* progress fallback */

#html5-process li progress, #html5-process li span { display:none; }  /* progress fallback */
#html5-process #html5-ishere        { color:#f16529; display:none; font-size:.8em; font-weight:bold; padding-left:2em; text-transform:uppercase; }
#html5-process #html5-ishere:before { content:'«'; font-size:1.3em;  padding-right:.5em; }

#html5-inprogress > ul > li           { margin-bottom:30px; }
#html5-inprogress ul ul               { list-style-type:none; margin-left:0; }
#html5-inprogress progress, #html5-inprogress li span { margin-right:.5em; }
#html5-inprogress li                  { line-height:150%; padding:2px 5px; }
#html5-inprogress li span             { font-size:.85em; font-weight:bold; margin:0 .5em; padding:0 .5em; width:10em; }  /* progress fallback */
#html5-inprogress li progress span    { display:inline-block; margin:0; }   /* ie7/8 hack; must be after (li span) */
#html5-inprogress progress            { background-color:#090; color:#fff; }
#html5-inprogress progress[value='-5'], #html5-inprogress progress[value='-1'], #html5-inprogress progress[value='-0'] { background-color:#009; }
#html5-inprogress progress[value='-1'], #html5-inprogress progress[value='-0'], #html5-inprogress progress[value='0'], #html5-inprogress progress[value='1']  { opacity:.6; }
#html5-inprogress progress[value='2'] { opacity:.7; }
#html5-inprogress progress[value='3'] { opacity:.8; }
#html5-inprogress progress[value='4'] { opacity:.9; }
#html5-inprogress progress[value='-5'], #html5-inprogress progress[value='5']  { opacity:1; }

#html5 > footer p em { color:#f14a29; font-size:1.25em; font-weight:bold; padding-left:15px; }


/***| feature detection |******************************************************/

#detect-js p.js:after strong                    { font-weight:bold; }
#detect-js p.js:after, #detect-js p.no-js:after { font-weight:bold; padding-left:1em; }
#detect-js p.no-js:after                        { color:#900; content:":'("; }

/* TODO: Fix references; they refer to a <p>, but that's not how they're used in the HTML'' */
.emailinput   #detect-js p.emailinput-check:after,
.localstorage #detect-js p.localstorage-check:after,
.video        #detect-js p.video-check:after
{ color:#090; content:':-D'; }

.no-emailinput   #detect-js p.emailinput-check:after,
.no-h264         #detect-js p.h264-check:after,
.no-localstorage #detect-js p.localstorage-check:after,
.no-video        #detect-js p.video-check:after
{ color:#900; content:':-('; }

.h264-probably #detect-js p.h264-check:after { content:':-S'; }
.h264-maybe    #detect-js p.h264-check:after { content:':-|'; }


/***| semantics |**************************************************************/

#semantics-section-ie .ielt9 { display:none; }
html.ie6 #semantics-section-ie .ielt9,    html.ie7 #semantics-section-ie .ielt9,    html.ie8 #semantics-section-ie .ielt9    { display:block; }
html.ie6 #semantics-section-ie .no-ielt9, html.ie7 #semantics-section-ie .no-ielt9, html.ie8 #semantics-section-ie .no-ielt9 { display:none; }

#semantics-section-code .container code     { margin:0; }
#semantics-section-code .container ins      { color:#6f6; }
#semantics-section-code .container          { color:#fff; margin:auto 2em; }
#semantics-section-code .container div      { background-color:#999; clear:both; margin:.5em; padding:.5em; text-align:center; }
#semantics-section-code .container div div  { background-color:#666; }
#semantics-section-code .container .article, #semantics-section-code .container .sidebar 
                                            { clear:none; height:5em; }
#semantics-section-code .container .article { float:left; width:62%; }
#semantics-section-code .container .sidebar { float:right; width:30%; }



/**********************************************************************************************************************/
/***| presentation mode |**********************************************************************************************/
/********************************************************************************************************************** /

/* full-size * /
html.js, .js body, .js #container { height:100%; width:100%; }
html.js, 
.js #container > header, 
.js article, 
.js article > header, 
.js article > section, 
.js article > footer
         { height:100%; overflow:hidden; width:100%; }
.js body { margin:0; }

/* hide notes */
.js aside { display:none; }


/***| title page |************************************************************* /

.js #container > header    { background-color:#f16529; }
.js #container > header h1 { background-color:#e44d26; font-size:5em; margin:37.5% 0 7.5%; padding:7.5% 5%; /*position:relative; bottom:0;* / width:100%; }
.js #container > header a  { color:#fff; text-decoration:none; }

.js #container > header > nav    { display:none; }


/***| article header |********************************************************* /

.js article > header           { background-color:#0092bf; color:#ccf; }
.js article > header hgroup, .js article > header h1 { background-color:#057; }
.js article > header h1        { padding:7.5% 5%; }
.js article > header hgroup h1 { padding-bottom:0; }
.js article > header hgroup h2 { padding:0 5% 2.5%; }


/***| presentation hacks |***************************************************** /

.js .after { display:none; }

.js #html5-history ol,
.js #html5-pubs > ul,
.js #html5-inprogress > ul,
.js #semantics-new ul,
.js #semantics > section > div,
.js article > section > div,
.js #semantics-embed ul
{ height:75%; overflow:auto; }

.js #detect > section > div { height:auto; }

.js #detect-js > dl { height:50%; overflow:auto; }
.js #detect-modload > code { display:none; }

.js #detect header dt { color:#057; }

.js #semantics-new ul { height:70%; }


/**********************************************************************************************************************/
/***| other |**********************************************************************************************************/
/**********************************************************************************************************************/

/* TODO: Refactor these to be more semantic/scoped to avoid unwanted styling */
figcaption   { font-style:italic;  }
figure       { padding-left:35px; }
.figureStack { padding-bottom:25px; }

/* TODO: Rename .iphoneShots CSS class -- should be more semantic */
.iphoneShots { width:213px; height:320px; padding:10px; }

/* TODO: Refactor this -- should be more semantic; class names should not dictate visual style */
.right { float:right; }
.center { text-align:center; }

/* TODO: Rename .jscript to .javascript */
code.jscript { display: inline; }
code.xml { display: inline; }

/* TODO: Refactor div.toolbar to be menu[type='toolbar'] */
div.toolbar { visibility:collapse; }



/**********************************************************************************************************************/
/***| media queries |**************************************************************************************************/
/**********************************************************************************************************************/

@media only screen and (min-width:480px) {
  /* style adjustments for viewports 480px and over go here */
}

@media only screen and (min-width:768px) {
  /* style adjustments for viewports 768px and over go here */
}
